<template>
  <PageDataSearch ref="searchRef" style="margin-bottom: -14px" @search="reload" />
  <ele-pro-table
    ref="tableRef"
    v-model:selections="selections"
    row-key="id"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    highlight-current-row
    cache-key="SystemConfigDataTable"
    class="config-data-table"
  >
    <template #toolbar>
      <el-button type="primary" class="ele-btn-icon" :icon="Plus" @click="openEdit()">
        新增
      </el-button>
    </template>
    <!-- 配置类型列 -->
    <template #type="{ row }">
      <el-tag
        v-if="row.type === 'readonly'"
        size="small"
      >
        只读文本
      </el-tag>
      <el-tag
        v-if="row.type === 'number'"
        type="success"
        size="small"
      >
        数字
      </el-tag>
      <el-tag
        v-if="row.type === 'text'"
        type="success"
        size="small"
      >
        单行文本
      </el-tag>
      <el-tag
        v-if="row.type === 'textarea'"
        type="warning"
        size="small"
      >
        多行文本
      </el-tag>
      <el-tag
        v-if="row.type === 'array'"
        type="danger"
        size="small"
      >
        数组
      </el-tag>
      <el-tag
        v-if="row.type === 'password'"
        size="small"
      >
        密码
      </el-tag>
      <el-tag
        v-if="row.type === 'radio'"
        type="success"
        size="small"
      >
        单选框
      </el-tag>
      <el-tag
        v-if="row.type === 'checkbox'"
        type="info"
        size="small"
      >
        复选框
      </el-tag>
      <el-tag
        v-if="row.type === 'select'"
        type="warning"
        size="small"
      >
        下拉框
      </el-tag>
      <!-- <el-tag
        v-if="row.type === 'icon'"
        type="danger"
        size="small"
      >
        字体图标
      </el-tag> -->
      <el-tag v-if="row.type === 'date'" type="" size="small">日期</el-tag>
      <el-tag
        v-if="row.type === 'datetime'"
        type="success"
        size="small"
      >
        时间
      </el-tag>
      <el-tag
        v-if="row.type === 'image'"
        type="info"
        size="small"
      >
        单张图片
      </el-tag>
      <el-tag
        v-if="row.type === 'images'"
        size="small"
      >
        多张图片
      </el-tag>
      <el-tag
        v-if="row.type === 'file'"
        type="success"
        size="small"
      >
        单个文件
      </el-tag>
      <el-tag
        v-if="row.type === 'files'"
        type="warning"
        size="small"
      >
        多个文件
      </el-tag>
      <el-tag
        v-if="row.type === 'ueditor'"
        type="danger"
        size="small"
      >
        富文本编辑器
      </el-tag>
    </template>
    <template #status="{ row }">
      <el-tag v-if="row.status === 1" type="success">正常</el-tag>
      <el-tag v-else type="danger">停用</el-tag>
    </template>
    <template #action="{ row }">
      <ComActions>
        <el-link type="primary" underline="never" @click="openEdit(row)">
          编辑
        </el-link>
        <el-link type="danger" underline="never" @click="remove(row)">
          删除
        </el-link>
      </ComActions>
    </template>
  </ele-pro-table>
  <PageDataEdit v-model="showEdit" :data="current" :config-id="configId" @done="reload" />
</template>

<script setup>
import { pageConfigData, removeConfigData } from '@/api/system/config'
import { formatDate } from '@/utils'
import { Plus } from '@element-plus/icons-vue'
import { EleMessage } from 'ele-admin-plus/es'
import { ElMessageBox } from 'element-plus/es'
import { ref, watch } from 'vue'
import PageDataEdit from './data-edit.vue'
import PageDataSearch from './data-search.vue'

const props = defineProps({
  /** 字典id */
  configId: Number,
})

/** 搜索栏实例 */
const searchRef = ref(null)

/** 表格实例 */
const tableRef = ref(null)

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'title',
    label: '配置标题',
    minWidth: 120,
  },
  {
    prop: 'code',
    label: '配置编码',
    minWidth: 120,
  },
  {
    prop: 'type',
    label: '配置类型',
    slot: 'type',
    minWidth: 120,
  },
  {
    prop: 'value',
    label: '配置值',
    minWidth: 120,
  },
  {
    prop: 'status',
    label: '状态',
    minWidth: 120,
    slot: 'status',
    align: 'center',
    formatter: row => row.status === 1 ? '正常' : '禁用',
  },
  {
    prop: 'sort',
    label: '排序号',
    // sortable: 'custom',
    width: 100,
    align: 'center',
  },
  {
    prop: 'note',
    label: '备注',
    minWidth: 110,
    align: 'center',
  },
  {
    prop: 'create_time',
    label: '创建时间',
    minWidth: 110,
    formatter: (row, column, cellValue) => {
      return formatDate(cellValue)
    },
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 130,
    align: 'right',
    slot: 'action',
  },
])

/** 表格选中数据 */
const selections = ref([])

/** 当前编辑数据 */
const current = ref(null)

/** 是否显示编辑弹窗 */
const showEdit = ref(false)

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return pageConfigData({
    ...where,
    ...orders,
    page,
    limit,
    config_id: props.configId,
  })
}

/** 刷新表格 */
function reload(where) {
  tableRef.value?.reload?.({ page: 1, where })
}

/** 打开编辑弹窗 */
function openEdit(row) {
  current.value = row ?? null
  showEdit.value = true
}

/** 删除 */
function remove(row) {
  ElMessageBox.confirm(
    `确定要删除“${row.title}”吗?`,
    '系统提示',
    { type: 'warning', draggable: true },
  )
    .then(() => {
      const loading = EleMessage.loading('请求中..')
      removeConfigData(row.id)
        .then((msg) => {
          loading.close()
          EleMessage.success(msg)
          reload()
        })
        .catch((e) => {
          loading.close()
          EleMessage.error(e.message)
        })
    })
    .catch(() => { })
}

// 监听字典id变化
watch(
  () => props.configId,
  () => {
    searchRef.value?.resetFields?.()
    reload({})
  },
)
</script>
